<template>
  <div class="line-effect-panel">
    <div class="panel-header">
      <h4>连线特效设置</h4>
      <el-button 
        type="text" 
        size="small" 
        @click="togglePanel"
      >
        <el-icon><ArrowDown v-if="!collapsed" /><ArrowUp v-else /></el-icon>
      </el-button>
    </div>
    
    <div v-show="!collapsed" class="panel-content">
      <!-- 特效类型选择 -->
      <div class="effect-section">
        <div class="section-title">特效类型</div>
        <el-radio-group v-model="currentEffect.type" @change="handleEffectChange">
          <el-radio-button label="current">电流</el-radio-button>
          <el-radio-button label="water">水流</el-radio-button>
          <el-radio-button label="arrow">方向</el-radio-button>
          <el-radio-button label="pulse">脉冲</el-radio-button>
          <el-radio-button label="dash">虚线</el-radio-button>
          <el-radio-button label="gradient">渐变</el-radio-button>
        </el-radio-group>
      </div>

      <!-- 特效开关 -->
      <div class="effect-section">
        <div class="section-title">特效开关</div>
        <el-switch
          v-model="currentEffect.enabled"
          active-text="启用"
          inactive-text="禁用"
          @change="handleEffectChange"
        />
      </div>

      <!-- 特效颜色 -->
      <div class="effect-section">
        <div class="section-title">特效颜色</div>
        <el-color-picker
          v-model="currentEffect.color"
          show-alpha
          @change="handleEffectChange"
        />
      </div>

      <!-- 特效速度 -->
      <div class="effect-section">
        <div class="section-title">特效速度</div>
        <el-slider
          v-model="currentEffect.speed"
          :min="100"
          :max="3000"
          :step="100"
          show-input
          input-size="small"
          @change="handleEffectChange"
        />
        <div class="slider-label">{{ currentEffect.speed }}ms</div>
      </div>

      <!-- 特效大小 -->
      <div class="effect-section">
        <div class="section-title">特效大小</div>
        <el-slider
          v-model="currentEffect.size"
          :min="1"
          :max="20"
          :step="1"
          show-input
          input-size="small"
          @change="handleEffectChange"
        />
        <div class="slider-label">{{ currentEffect.size }}px</div>
      </div>

      <!-- 特效方向 -->
      <div class="effect-section">
        <div class="section-title">特效方向</div>
        <el-radio-group v-model="currentEffect.direction" @change="handleEffectChange">
          <el-radio label="forward">正向</el-radio>
          <el-radio label="backward">反向</el-radio>
          <el-radio label="bidirectional">双向</el-radio>
        </el-radio-group>
      </div>

      <!-- 特效强度 -->
      <div class="effect-section">
        <div class="section-title">特效强度</div>
        <el-slider
          v-model="currentEffect.intensity"
          :min="0.1"
          :max="2"
          :step="0.1"
          show-input
          input-size="small"
          @change="handleEffectChange"
        />
        <div class="slider-label">{{ currentEffect.intensity }}x</div>
      </div>

      <!-- 特效透明度 -->
      <div class="effect-section">
        <div class="section-title">特效透明度</div>
        <el-slider
          v-model="currentEffect.opacity"
          :min="0.1"
          :max="1"
          :step="0.1"
          show-input
          input-size="small"
          @change="handleEffectChange"
        />
        <div class="slider-label">{{ Math.round(currentEffect.opacity * 100) }}%</div>
      </div>

      <!-- 连线颜色 -->
      <div class="effect-section">
        <div class="section-title">连线颜色</div>
        <el-color-picker
          v-model="lineColor"
          show-alpha
          @change="handleLineColorChange"
        />
      </div>

      <!-- 连线宽度 -->
      <div class="effect-section">
        <div class="section-title">连线宽度</div>
        <el-slider
          v-model="lineWidth"
          :min="1"
          :max="10"
          :step="1"
          show-input
          input-size="small"
          @change="handleLineWidthChange"
        />
        <div class="slider-label">{{ lineWidth }}px</div>
      </div>

      <!-- 特效预设 -->
      <div class="effect-section">
        <div class="section-title">特效预设</div>
        <div class="preset-list">
          <div
            v-for="preset in effectPresets"
            :key="preset.name"
            class="preset-item"
            @click="applyPreset(preset)"
          >
            <div class="preset-preview" :style="getPresetPreviewStyle(preset.effect)"></div>
            <div class="preset-info">
              <div class="preset-name">{{ preset.name }}</div>
              <div class="preset-desc">{{ preset.description }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="effect-section">
        <el-button type="primary" size="small" @click="applyToSelected">
          应用到选中连线
        </el-button>
        <el-button size="small" @click="resetEffect">
          重置特效
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import type { LineEffect, LineEffectPreset } from '@/types/circuitDiagram'

// Props
interface Props {
  modelValue?: LineEffect
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: undefined
})

// Emits
const emit = defineEmits<{
  'update:modelValue': [effect: LineEffect]
  'apply-to-selected': [effect: LineEffect]
  'line-color-change': [color: string]
  'line-width-change': [width: number]
}>()

// 响应式数据
const collapsed = ref(false)

// 当前特效配置
const currentEffect = reactive<LineEffect>({
  type: 'current',
  enabled: true,
  color: '#409eff',
  speed: 1000,
  size: 3,
  direction: 'forward',
  intensity: 1,
  opacity: 0.8
})

// 特效预设
const effectPresets: LineEffectPreset[] = [
  {
    name: '标准电流',
    description: '蓝色电流流动效果',
    effect: {
      type: 'current',
      enabled: true,
      color: '#409eff',
      speed: 1000,
      size: 3,
      direction: 'forward',
      intensity: 1,
      opacity: 0.8
    }
  },
  {
    name: '快速电流',
    description: '高速电流效果',
    effect: {
      type: 'current',
      enabled: true,
      color: '#67c23a',
      speed: 500,
      size: 2,
      direction: 'forward',
      intensity: 1.2,
      opacity: 0.9
    }
  },
  {
    name: '水流效果',
    description: '模拟水流流动',
    effect: {
      type: 'water',
      enabled: true,
      color: '#1890ff',
      speed: 1500,
      size: 4,
      direction: 'forward',
      intensity: 0.8,
      opacity: 0.7
    }
  },
  {
    name: '方向箭头',
    description: '带方向指示的箭头',
    effect: {
      type: 'arrow',
      enabled: true,
      color: '#f56c6c',
      speed: 2000,
      size: 5,
      direction: 'forward',
      intensity: 1,
      opacity: 0.8
    }
  },
  {
    name: '脉冲效果',
    description: '脉冲式闪烁效果',
    effect: {
      type: 'pulse',
      enabled: true,
      color: '#e6a23c',
      speed: 800,
      size: 3,
      direction: 'bidirectional',
      intensity: 1.5,
      opacity: 0.6
    }
  },
  {
    name: '虚线流动',
    description: '虚线流动效果',
    effect: {
      type: 'dash',
      enabled: true,
      color: '#909399',
      speed: 1200,
      size: 2,
      direction: 'forward',
      intensity: 1,
      opacity: 0.8
    }
  }
]

// 初始化特效配置
if (props.modelValue) {
  Object.assign(currentEffect, props.modelValue)
}

// 切换面板显示
const togglePanel = () => {
  collapsed.value = !collapsed.value
}

// 特效变化处理
const handleEffectChange = () => {
  emit('update:modelValue', { ...currentEffect })
}

// 应用预设
const applyPreset = (preset: LineEffectPreset) => {
  Object.assign(currentEffect, preset.effect)
  handleEffectChange()
}

// 应用到选中连线
const applyToSelected = () => {
  emit('apply-to-selected', { ...currentEffect })
}

// 重置特效
const resetEffect = () => {
  Object.assign(currentEffect, {
    type: 'current',
    enabled: true,
    color: '#409eff',
    speed: 1000,
    size: 3,
    direction: 'forward',
    intensity: 1,
    opacity: 0.8
  })
  handleEffectChange()
}

// 获取预设预览样式
const getPresetPreviewStyle = (effect: LineEffect): Record<string, string> => {
  const baseStyle: Record<string, string> = {
    width: '40px',
    height: '20px',
    border: '1px solid #dcdfe6',
    borderRadius: '2px',
    position: 'relative',
    overflow: 'hidden'
  }

  if (!effect.enabled) {
    return {
      ...baseStyle,
      background: '#f5f7fa'
    }
  }

  switch (effect.type) {
    case 'current':
      return {
        ...baseStyle,
        background: `linear-gradient(90deg, transparent, ${effect.color}, transparent)`,
        animation: `current-flow ${effect.speed}ms linear infinite`
      }
    case 'water':
      return {
        ...baseStyle,
        background: `linear-gradient(90deg, transparent, ${effect.color}, transparent)`,
        animation: `water-flow ${effect.speed}ms ease-in-out infinite`
      }
    case 'arrow':
      return {
        ...baseStyle,
        background: effect.color,
        position: 'relative'
      }
    case 'pulse':
      return {
        ...baseStyle,
        background: effect.color,
        animation: `pulse ${effect.speed}ms ease-in-out infinite`
      }
    case 'dash':
      return {
        ...baseStyle,
        background: `repeating-linear-gradient(90deg, ${effect.color} 0, ${effect.color} 4px, transparent 4px, transparent 8px)`,
        animation: `dash-move ${effect.speed}ms linear infinite`
      }
    case 'gradient':
      return {
        ...baseStyle,
        background: `linear-gradient(90deg, ${effect.color}00, ${effect.color}, ${effect.color}00)`,
        animation: `gradient-flow ${effect.speed}ms ease-in-out infinite`
      }
    default:
      return baseStyle
  }
}

// 连线颜色
const lineColor = ref('#000000')

// 连线宽度
const lineWidth = ref(2)

// 处理连线颜色变化
const handleLineColorChange = (color: string) => {
  lineColor.value = color
  emit('line-color-change', color)
}

// 处理连线宽度变化
const handleLineWidthChange = (width: number) => {
  lineWidth.value = width
  emit('line-width-change', width)
}
</script>

<style scoped>
.line-effect-panel {
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-bottom: 10px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #dcdfe6;
  background: #f5f7fa;
}

.panel-header h4 {
  margin: 0;
  font-size: 14px;
  color: #303133;
}

.panel-content {
  padding: 15px;
}

.effect-section {
  margin-bottom: 15px;
}

.effect-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 12px;
  color: #606266;
  margin-bottom: 8px;
  font-weight: 500;
}

.slider-label {
  font-size: 11px;
  color: #909399;
  text-align: center;
  margin-top: 5px;
}

.preset-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.preset-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.preset-item:hover {
  border-color: #409eff;
  background: #f0f9ff;
}

.preset-preview {
  margin-right: 8px;
}

.preset-info {
  flex: 1;
}

.preset-name {
  font-size: 12px;
  color: #303133;
  font-weight: 500;
  margin-bottom: 2px;
}

.preset-desc {
  font-size: 10px;
  color: #909399;
}

/* 动画效果 */
@keyframes current-flow {
  0% { background-position: -40px 0; }
  100% { background-position: 40px 0; }
}

@keyframes water-flow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes dash-move {
  0% { background-position: 0 0; }
  100% { background-position: 8px 0; }
}

@keyframes gradient-flow {
  0% { background-position: -40px 0; }
  100% { background-position: 40px 0; }
}
</style> 